<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="js/echarts.min.js" ></script>
    <script type="text/javascript" src="js/jquery.min.js" ></script>
    <title></title>
    <script>
        function goBackChinaMap(){
            $('#china_map').css('display','block');
            $('#city_map').css('display','none');
            $('#proe_map').css('display','none');
        }
        function goBackProeMap(){
            $('#china_map').css('display','none');
            $('#city_map').css('display','none');
            $('#proe_map').css('display','block');
        }
    </script>
</head>
<body>

    <div id="china_map" style="width:960px;height:650px;margin:0 auto;position: absolute;top:10px;left:80px;display: block;"></div>
    <div id="proe_map" style="width:960px;height:650px;margin:0 auto;position: absolute;top:10px;left:80px;display: none;"></div>
    <div id="city_map" style="width:960px;height:650px;margin:0 auto;position: absolute;top:10px;left:80px;display: none;"></div>

<script>
    $().ready(function(){
        /*echarts*/
        $.get('json/江苏/南通市.json', function (mapJson) {

                echarts.registerMap('jiangxi', mapJson);
            var myChart = echarts.init(document.getElementById('china_map'));//在id为mainMap的dom元素中显示地图
                myChart.hideLoading();



                var geoCoordMap = {
                    '崇川区':[120.86635,32.015278],
                    '港闸区':[120.8339,32.040299],
                    '启东市':[121.659724,31.810158],
                    '海安市':[120.465995,32.540289],
                    '如东县':[121.186088,32.311832],
                    '通州区':[121.073171,32.084287],
                    '如皋市':[120.566324,32.391591],
                    '海门市':[121.176609,31.993528]
                };
                var moveLine = {
                    'normal':[
                        {"fromName":"崇川区","toName":"港闸区",'coords':[[120.86635,32.015278],[120.8339,32.040299],]},
                        {"fromName":"启东市","toName":"港闸区",'coords':[[121.659724,31.810158],[120.8339,32.040299],]},
                        {"fromName":"海安市","toName":"港闸区",'coords':[[120.465995,32.540289],[120.8339,32.040299],]},
                        {"fromName":"如东县","toName":"港闸区",'coords':[[121.186088,32.311832],[120.8339,32.040299],]},
                        {"fromName":"通州区","toName":"港闸区",'coords':[[121.073171,32.084287],[120.8339,32.040299],]},
                        {"fromName":"如皋市","toName":"港闸区",'coords':[[120.566324,32.391591],[120.8339,32.040299],]},
                        {"fromName":"海门市","toName":"港闸区",'coords':[[121.176609,31.993528],[120.8339,32.040299],]}

                    ],
                    'warning':[

                    ]
                };
                var data = [
                    {name:'崇川区',value:290},
                    {name:'港闸区',value:230},
                    {name:'启东市',value:170},
                    {name:'海安市',value:210},
                    {name:'如东县',value:190},
                    {name:'通州区',value:90},
                    {name:'如皋市',value:160},
                    {name:'海门市',value:120}
                ];
                var max = 480, min = 9; // todo
                var maxSize4Pin = 100, minSize4Pin = 20;

                var convertData = function (data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var geoCoord = geoCoordMap[data[i].name];
                        if (geoCoord) {
                            res.push({
                                name: data[i].name,
                                value: geoCoord.concat(data[i].value)
                            });
                        }
                    }
                    return res;
                };


                option = {
                    backgroundColor: '#091c3d',
                    title: {
                        top:20,
                        text: '',
                        subtext: '',
                        x: 'center',
                        textStyle: {
                            color: '#ccc'
                        }
                    },

                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            if(typeof(params.value)[2] == "undefined"){
                                return params.name + ' : ' + params.value;
                            }else{
                                return params.name + ' : ' + params.value[2];
                            }
                        }
                    },
                    legend: {
                        orient: 'vertical',
                        y: 'bottom',
                        x:'right',
                        data:['pm2.5'],
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    visualMap: {
                        show: false,
                        min: 0,
                        max: 500,
                        left: 'left',
                        top: 'bottom',
                        text: ['高', '低'], // 文本，默认为数值文本
                        calculable: true,
                        seriesIndex: [1],
                        inRange: {
                            // color: ['#3B5077', '#031525'] // 蓝黑
                            // color: ['#ffc0cb', '#800080'] // 红紫
                            // color: ['#3C3B3F', '#605C3C'] // 黑绿
                            //color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
                            //color: ['#23074d', '#cc5333'] // 紫红
                            color: ['#00467F', '#A5CC82'] // 蓝绿
                            // color: ['#1488CC', '#2B32B2'] // 浅蓝
                            // color: ['#00467F', '#A5CC82'] // 蓝绿
                            // color: ['#00467F', '#A5CC82'] // 蓝绿
                            // color: ['#00467F', '#A5CC82'] // 蓝绿
                            // color: ['#00467F', '#A5CC82'] // 蓝绿

                        }
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                                dataView: {readOnly: false},
                                restore: {},
                                saveAsImage: {}
                                }
                    },
                    geo: {
                        show: true,
                        map: 'jiangxi',
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false,
                            }
                        },
                        roam: true,
                        itemStyle: {
                            normal: {
                                areaColor: 'transparent',
                                borderColor: '#3fdaff',
                                borderWidth: 2,
                                shadowColor: 'rgba(63, 218, 255, 0.5)',
                                shadowBlur: 30
                            },
                            emphasis: {
                                areaColor: '#2B91B7',
                            }
                        }
                    },
                    series : [
                        {
                            name: 'light',
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            data: convertData(data),
                            symbolSize: function (val) {
                                return val[2] / 10;
                            },
                            label: {
                                normal: {
                                    formatter: '{b}',
                                    position: 'right',
                                    show: true
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#F4E925'
                                }
                            }
                        },
                        {
                            type: 'map',
                            map: 'jiangxi',
                            geoIndex: 0,
                            aspectScale: 0.75, //长宽比
                            showLegendSymbol: false, // 存在legend时显示
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false,
                                    textStyle: {
                                        color: '#fff'
                                    }
                                }
                            },
                            roam: true,
                            itemStyle: {
                                normal: {
                                    areaColor: '#031525',
                                    borderColor: '#FFFFFF',
                                },
                                emphasis: {
                                    areaColor: '#2B91B7'
                                }
                            },
                            animation: false,
                            data: data
                        },
                        {
                            name: 'Top 5',
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            data: convertData(data.sort(function (a, b) {
                                return b.value - a.value;
                            }).slice(0, 5)),
                            symbolSize: function (val) {
                                return val[2] / 10;
                            },
                            showEffectOn: 'render',
                            rippleEffect: {
                                brushType: 'stroke'
                            },
                            hoverAnimation: true,
                            label: {
                                normal: {
                                    formatter: '{b}',
                                    position: 'right',
                                    show: true
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#F4E925',
                                    shadowBlur: 10,
                                    shadowColor: '#05C3F9'
                                }
                            },
                            zlevel: 1
                        },
                        {
                            name: '线路',
                            type: 'lines',
                            coordinateSystem: 'geo',
                            zlevel: 2,
                            large: true,
                            effect: {
                                show: true,
                                period: 6,
                                trailLength: 0.1,
                                symbol: 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
                                symbolSize: 10
                            },
                            // lineStyle: {
                            //     normal: {
                            //         width: 1,
                            //         opacity: 0.4,
                            //        // curveness: arcAngle(item[1]), //弧线角度
                            //         color: '#fff'
                            //     }
                            // },
                            // effect: {
                            //     show: true,
                            //     constantSpeed: 30,
                            //     symbol: 'arrow',//ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                            //     symbolSize: 0,
                            //     trailLength: 0,
                            // },
                            //
                            lineStyle: {
                                normal: {
                                    color:'#0fff17',
                                    /*
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0, color: '#58B3CC'
                                        }, {
                                            offset: 1, color: '#F58158'
                                        }], false),*/
                                    width: 2,
                                    opacity: 1.0,
                                    curveness: 0.15
                                }
                            },
                            data: moveLine.normal
                        },
                        {
                            name: '线路',
                            type: 'lines',
                            coordinateSystem: 'geo',
                            zlevel: 3,
                            large: true,
                            effect: {
                                show: true,
                                constantSpeed: 30,
                                symbol: 'arrow',//ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                                symbolSize: 10,
                                trailLength: 0,
                            },

                            lineStyle: {
                                normal: {
                                    color:'rgb(255, 0, 0)',
                                    width: 2,
                                    opacity: 1,
                                    curveness: 0.15
                                }
                            },
                            data: moveLine.warning
                        }

                    ]
                };
                myChart.setOption(option);
            });


    });
</script>
</body>
</html>
